<template>
    <div>
        <div class="container">
            <el-row>
                <span class="demonstration mr20 ml10">管理员选择</span>
                <el-select v-model="adminSelect" placeholder="请选择管理员" filterable style="width: 260px;">
                    <el-option
                            v-for="item in adminSelectOptions"
                            :key="item.id"
                            :label="item.userName"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-button type="primary" @click="getAllNoitce" class="ml30">恢复</el-button>
            </el-row>
            <el-row style="padding-top: 10px" v-if="timeValueVisible">
                <span class="demonstration mr20 ml10">时间段选择</span>
                <el-date-picker
                        v-model="timeValue"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-row>
            <el-row style="padding-top: 20px">
                <el-table
                        :data="noticeTableData"
                        style="width: 100%; border-radius: 5px">
                    <el-table-column
                            prop="id"
                            label="工号"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="userName"
                            label="姓名"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="notice"
                            label="通知内容"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="time"
                            label="发布时间"
                            align="center">
                    </el-table-column>
                </el-table>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {
        requestGetAllNotice,requestGetAllAdmin,requestGetAdminById,
        requestNoticeByTime,requestAddNotice
    }from '../../../api';
    export default {
        name: 'staffNotice',
        data(){
            return{
                loading: false,
                adminSelect:'',
                adminSelectOptions:[],
                noticeTableData:[],
                timeValueVisible: false,
                timeValue:'',
                noticeVisible:false,
                noticeForm:{
                    textarea:''
                },
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            }
        },
        created() {
            this.getAllNoitce();
        },
        watch:{
            async adminSelect(){
                console.log(this.adminSelect);
                if (this.adminSelect === ''){
                    let json = {};
                    const res = await requestGetAllNotice(json);
                    console.log(res)
                    this.noticeTableData = res;
                }else{
                    let json = {
                        id : this.adminSelect
                    };
                    const res = await requestGetAdminById(json);
                    this.noticeTableData = res;
                    this.timeValueVisible = true;
                }
            },
            async timeValue(){
                let startTime = '';
                let endTime = '';
                if (this.timeValue === '') {
                    startTime = "1000-01-01";
                    endTime = "9999-12-30";
                    this.$message.warning("默认时间范围为全部时间");
                } else {
                    startTime = this.changeDateToFomat(this.timeValue[0]);
                    endTime = this.changeDateToFomat(this.timeValue[1]);
                }
                let json = {
                    startTime: startTime,
                    endTime: endTime,
                    id: this.adminSelect
                };
                console.log(json);
                const res = await requestNoticeByTime(json);
                this.noticeTableData = res;
            }
        },
        methods:{
            async getAllNoitce(){
                this.adminSelect = '';
                this.timeValueVisible = false;
                let json = { params : ''};
                const res = await requestGetAllNotice(json);
                this.noticeTableData = res;
                const res1 = await requestGetAllAdmin(json);
                this.adminSelectOptions = res1;
            },
            //转化日期标准格式：“xx-xx-xx”
            changeDateToFomat(date) {
                let seperator1 = "-";
                let month = date.getMonth() + 1;
                let strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
                return currentdate;
            },
        },
    };
</script>

<style scoped>
    .mr20{
        margin-right: 20px;
    }
    .ml10{
        margin-left: 10px;
    }
    .ml30{
        margin-left: 30px;
    }
</style>